<template>
    <el-scrollbar height="50em">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="top"
        >
            <el-form-item label="页面标题">
                <el-input v-model.trim="form.navigationBarTitleText" />
            </el-form-item>

            <el-form-item label="导航文字颜色">
                <el-radio-group v-model="form.navigationBarTextStyle" class="ml-4">
                    <el-radio label="default" size="large">继承全局</el-radio>
                    <el-radio label="black" size="large">黑色</el-radio>
                    <el-radio label="white" size="large">白色</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="导航栏背景色">
                <el-color-picker v-model="form.navigationBarBackgroundColor" />
            </el-form-item>
            
            <el-form-item label="页面背景色">
                <el-color-picker v-model="form.backgroundColor" />
            </el-form-item>
            
        </el-form>
    </el-scrollbar>
</template>


<script lang="ts">
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            form: {
                navigationBarTitleText: "",
                navigationBarTextStyle: "default",
                navigationBarBackgroundColor: "",
                backgroundColor: ""
            },
            rules: {
                
            }
        } 
    },
    props: {
        // 提交次数，用来监听提交数据的
        confirm: {
            type: Number,
            default: 0
        },
        // 当前操作的模板id
        tpl_id: {
            default: 0    
        },
        // 模板是否初始化完成，watch监听
        initComplete: {
            default: false
        }
    },  
    watch: {
        // 提交表单
        confirm(value) {
            if(value) {
                this.submit()
            }
        },
        // 初始化是否完成
        initComplete(value) {
            if(value) {
                console.log("完成")
                this.getForm()
            }
        }
    },
    methods: {
        /**
         * 获取数据
         */
        async getForm() {
            let form = await this.$get("edit/pages",{
                tpl_id: this.tpl_id,
                path: "pages/index/index"
            })

            if(!form.navigationBarTextStyle) {
                form.navigationBarTextStyle = 'default'
            }
            this.form = form
        },
        /**
         * 提交
         */
        submit() {
            this.$refs.form.validate((valid) => {
                let { 
                    navigationBarTitleText,
                    navigationBarTextStyle,
                    navigationBarBackgroundColor,
                    backgroundColor
                } = this.form
                
                let data:any = {}

                if(navigationBarTitleText != '') {
                    data.navigationBarTitleText = navigationBarTitleText
                }

                if(navigationBarTextStyle != 'default') {
                    data.navigationBarTextStyle = navigationBarTextStyle
                }

                if(navigationBarBackgroundColor) {
                    data.navigationBarBackgroundColor = navigationBarBackgroundColor
                }

                if(backgroundColor) {
                    data.backgroundColor = backgroundColor
                }

                console.log(data)

                this.$post("edit/pages",{
                    tpl_id: this.tpl_id,
                    path: "pages/index/index",
                    data
                })
                    .then(() => {
                        ElMessage({
                            type: "success",
                            message: "设置成功"
                        })
                    })
            }) 
        }
    }
}
</script>

<style lang="scss" scoped>
    .form{
        display: flex;
        flex-direction: column;
        background-color: yellow;
    }
</style>

